import {Meta} from '@storybook/addon-docs/blocks';

<Meta title="Guide/Translation" />

# Translation

## Usage

Check the [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for an example displaying a translated string.

## Development workflow

Translation keys are detected in the source code by searching for the composable/mixin `t` function at build time.

When `npm run build` or `npm run dev` is run, a vite plugin will detect all uses of translation keys and save them to `registry/uiLocaleKeysBackend.json`.

<img
	src="guide/Translation/development_workflow.png"
	alt="Development workflow"
	style={{width: '400px', height: 'auto'}}
/>

## Development workflow for Storybook

Yet to be [introduced](https://github.com/pkp/pkp-lib/issues/9618).

## Runtime workflow

When the page is being loaded, translations are fetched separately from the `/index.php/journal_name/api/v1/_i18n/ui.js` endpoint and made available to the Vue.js.

<img
	src="guide/Translation/runtime_workflow.png"
	alt="Runtime workflow"
	style={{width: '400px', height: 'auto'}}
/>

# Localizaton - Multilingual Data

## Usage

Check the [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for an example.

Multilingual data is usually provided as a JSON object. Each key holds the locale code. The following response shows the name property of a journal in English and Canadian French.

```js
{
	"name": {
		"en": "Journal of Public Knowledge",
		"fr_CA": "Journal de la connaissance du public"
	}
}
```
